<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>为什么要清除浮动</title>
  <style> 
  /* 为什么要清除浮动？
  由于父盒子很多情况下不方便给高度，但是子盒子浮动后又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子

  【由于浮动元素不占用原文档流的位置，所以他会对后面的元素排版产生影响】 */
  
  .box {
    width: 800px;
    background-color: #000;
    margin: 0 auto;
    border: 1px solid red;
  }

  /* 父盒子没有设置 height 值，给子盒子添加 float 后父盒子高度变为 0 */
  .damao {
    float: left;
    width: 300px;
    height: 300px;
    background-color: pink;
  }

  .ermao {
    float: left;
    width: 200px;
    height: 300px;
    background-color: purple;
  }

  /* 父盒子底下的正常文档流会占据父盒子的位置 */
  .footer {
    height: 50px;
    background-color: #666;
  }
  </style>
</head>
<body>
  <div class="box">
    <div class="damao"></div>
    <div class="ermao"></div>
  </div>

  <div class="footer"></div>
</body>
</html>